<!--
 * @Author: Haochen
 * @Date: 2021-12-25 11:29:34
 * @LastEditTime: 2021-12-30 17:23:34
 * @FilePath: \recipes-admin-system\src\components\menu\Ingredients.vue
-->
<template>
  <el-popover placement="left" trigger="hover" transition="fade-in-linear">
    <el-table :data="ingredient" class="ingredient-table" height="fit-content">
      <el-table-column
        width="100"
        property="name"
        label="材料"
      ></el-table-column>
      <el-table-column
        width="80"
        property="number"
        label="份量"
      ></el-table-column>
    </el-table>
    <el-button slot="reference">查看</el-button>
  </el-popover>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    ingredient: {
      type: Array,
    },
  },
  created() {},

  methods: {},
};
</script>

<style scoped lang="scss">
.ingredient-table {
  overflow-y: auto;
  max-height: 300px;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  /*width: 0;宽度为0隐藏*/
  width: 0px;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 2px;
  height: 50px;
  background: #eee;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.4);
}
</style>
